<template>
  <div class="container">
    <div class="top">
      <div class="inp-box">
        <input type="text"
               placeholder="请输入劵码"
               class="code-inp"
               maxlength="30"
               v-model="ticket_code">
      </div>
      <div class="btn"
           @click="chec_code()">
        确定
      </div>
    </div>
    <div class="form">
      <div class="section hospital">
        <div class="title" v-if="pt_mark">
          <span class="icon"></span>
          医院信息
        </div>
        <div class="form-item">
          <div class="left">
            医院
          </div>
          <div class="right">
            ：
            <input type="text"
                   class="inp"
                   placeholder="请选择医院"
                   v-model="hos_name"
                   disabled>
            <cube-select :options="hospital_arr"
                         :disabled="hospital_arr.length==0"
                         v-model="hos_id"
                         @change="select_hospital"></cube-select>
          </div>

        </div>
        <div class="form-item">
          <div class="left">
            项目
          </div>
          <div class="right">
            ：<input type="text"
                   class="inp"
                   placeholder="请选择项目"
                   v-model="pro_name"
                   disabled>
            <cube-select :options="project_arr"
                         :disabled="project_arr.length==0"
                         v-model="pro_id"
                         @change="select_project"></cube-select>
          </div>

        </div>
        <div class="form-item" v-if="pt_mark">
          <div class="left">
            医生
          </div>
          <div class="right">
            ：<input type="text"
                   class="inp"
                   placeholder="请选择医生"
                   v-model="doc_name"
                   disabled>
            <cube-select :options="doctor_arr"
                         :disabled="doctor_arr.length==0"
                         v-model="doc_id"
                         @change="select_doctor"></cube-select>
          </div>

        </div>
        <div class="form-item"
             @click="showDatePicker">
          <div class="left" v-if="pt_mark">
            手术时间
          </div>
           <div class="left" v-if="!pt_mark">
            预约时间
          </div>
          <div class="right" v-if="pt_mark">
            ：<input type="text"
                   class="inp"
                   placeholder="请选择手术时间"
                   v-model="operation_time"
                   disabled>
          </div>
          <div class="right" v-if="!pt_mark">
            ：<input type="text"
                   class="inp"
                   placeholder="请选择预约时间"
                   v-model="operation_time"
                   disabled>
          </div>

        </div>
      </div>
      <div class="section user">
        <div class="title" v-if="pt_mark">
          <span class="icon"></span>
          用户信息
        </div>

        <div class="form-item">
          <div class="left">
            姓名
          </div>
          <div class="right">
            ：<input type="text"
                   class="inp"
                   placeholder="请输入用户姓名"
                   v-model="realname">
          </div>

        </div>
        <div class="form-item">
          <div class="left">
            手机号
          </div>
          <div class="right">
            ：<input type="tel"
                   class="inp"
                   placeholder="请输入用户手机号"
                   v-model="user_tel"
                   maxlength="11">
          </div>
        </div>
        <div class="form-item">
          <div class="left left1">
            线上已支付
          </div>
          <div class="right">
            ：<input type="tel"
                   class="inp"
                   placeholder=""
                   v-model="deposit"
                    disabled>
          </div>
        </div>
        <div class="form-item">
          <div class="left left1">
            到院需支付
          </div>
          <div class="right right1">
            ：<input type="tel"
                   class="inp moneyinp"
                   placeholder=""
                   v-model="money"
                   minlength="1">
          </div>
        </div>
        <div class="form-item" v-if="pt_mark">
          <div class="left ">
            验证码
          </div>
          <div class="right right1">
            ：<input type="tel"
                   class="inp"
                   placeholder="请输入验证码"
                   maxlength="6"
                   v-model="user_check">
            <div class="get-msg"
                 @click.stop="get_msg()">
              {{this.num==60?"获取验证码":this.num+"秒可重新发送"}}
            </div>
          </div>
        </div>
      </div>
      <div class="sub-btn"
           @click="sub_form()">
          完成
      </div>
    </div>

  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import  api from '../../assets/js/api'
let timer
export default {
  data () {
    return {
      hospital_arr: [],
      hos_id: "",
      hos_name: "",
      project_arr: [],
      pro_id: "",
      pro_name: "",
      doctor_arr: [],
      doc_id: "",
      doc_name: "",
      ticket_code: "",// 券码
      tc_id: "",
      btn_msg: "获取验证码",
      operation_time: "",
      realname: "",
      user_tel: "",
      user_check: "",
      num: 60,
      pt_mark:true,
      deposit:0,  //已支付
      money:''  //到院需支付
    }
  },
  methods: {
    chec_code () {
      if (this.ticket_code.trim() == "") {
        Toast({
          message: '请输入券码',
          position: "bottom",
          duration: 1500
        });
      } else {
        this.axios.post("api/butler/ticket/search", {
          code: this.ticket_code
        }).then((result) => {
          let res = result.data
          this.hospital_arr = []
          this.project_arr = []
          this.doctor_arr = []
          this.hos_id = ""
          this.hos_name = ""
          this.pro_id = ""
          this.pro_name = ""
          this.doc_id = ""
          this.doc_name = ""
          this.operation_time = ""
          if (res.code == 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 1500
            });
            if (res.data.hos_list.length > 0) {
              this.tc_id = res.data.tcid
              res.data.hos_list.forEach(item => {
                item.value = item.id
                item.text = item.name
              });
              this.hospital_arr = res.data.hos_list
            }
            if (res.data.pro_list.length > 0) {
              res.data.pro_list.forEach(item => {
                item.value = item.id
                item.text = item.project
              })
              this.project_arr = res.data.pro_list
            }
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 1500
            });
          }
        }).catch((err) => {
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 1500
          });
        });
      }
    },
    select_hospital (value, index, text) {
      this.hos_name = text
      this.axios.post("api/butler/doctor", {
        hos_id: this.hos_id
      }).then((result) => {
        let res = result.data
        if (res.code == 200) {
          if (res.data.doctors.length > 0) {
            res.data.doctors.forEach(item => {
              item.value = item.id
              item.text = item.name
            });
            this.doctor_arr = res.data.doctors
          }
        } else {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 1500
          });
        }
      }).catch((err) => {
        Toast({
          message: "请求失败，请稍后重试",
          position: "bottom",
          duration: 1500
        });
      });
    },
    select_project (value, index, text) {
      this.pro_name = text
    },
    select_doctor (value, index, text) {
      this.doc_name = text
    },
    showDatePicker () {
      this.$createDatePicker({
        title: '请选择手术时间',
        min: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0),
        max: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59),
        value: new Date(),
        columnCount: 6,
        onSelect: this.selectHandle,
        onCancel: this.cancelHandle
      }).show();
    },
    selectHandle (date, selectedVal, selectedText) {
      let arr = selectedText
      this.operation_time = `${arr[3]}:${arr[4]}:${arr[5]}`
    },
    get_msg () {
      if (this.num < 60) {
        return false
      }
      if (this.user_tel.trim() == "") {
        Toast({
          message: '请输入手机号',
          position: "bottom",
          duration: 1500
        });
        return false
      } else {
        this.axios.post("api/send/msg", {
          username: this.user_tel,
          type: 1016
        }).then((result) => {
          let res = result.data
          if (res.code == 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 1500
            });
            timer = setInterval(() => {
              this.num--
              if (this.num <= 0) {
                clearInterval(timer)
                this.num = 60
              }
            }, 1000);
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 1500
            });
          }
        }).catch((err) => {
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 1500
          });
        });
      }
    },
    sub_form () {
      if (this.ticket_code.trim() == "") {
        Toast({
          message: '请输入券码',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.hos_id == "") {
        Toast({
          message: '请选择医院',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.pro_id == "") {
        Toast({
          message: '请选择项目',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.doc_id == "") {
        Toast({
          message: '请选择医生',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.operation_time == "") {
        Toast({
          message: '请选择手术时间',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.realname.trim() == "") {
        Toast({
          message: '请输入用户姓名',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.user_tel.trim() == "") {
        Toast({
          message: '请输入用户手机号',
          position: "bottom",
          duration: 1500
        });
        return false
      }
      else if (this.user_check.trim() == "") {
        Toast({
          message: '请输入验证码',
          position: "bottom",
          duration: 1500
        });
        return false
      } else {
        let load = this.loading("提交中");
        load.show();
        this.axios.post("api/butler/ticket/check", {
          tcid: this.tc_id,
          hos_id: this.hos_id,
          pro_id: this.pro_id,
          doc_id: this.doc_id,
          op_time: this.operation_time,
          name: this.realname,
          username: this.user_tel,
          verify: this.user_check
        }).then((result) => {
          load.hide()
          let res = result.data
          if (res.code == 200) {
            Toast({
              message: "核销成功",
              position: "bottom",
              duration: 2000
            });
            setTimeout(() => {
              this.$emit("change_tab", 2)
            }, 2000)

          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 1500
            });
          }
        }).catch((err) => {
          load.hide()
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 1500
          });
        });
      }
    }
  },
  created () {
    this.axios.defaults.baseURL = api
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: #fff;
  position: relative;
  .top {
    padding: 0 15px;
    display: flex;
    .inp-box {
      flex: 1;
      height: 40px;
      .code-inp {
        height: 100%;
        width: 100%;
        border-radius: 4px;
        line-height: 40px;
        padding-left: 10px;
        border: 1px solid rgba(238, 238, 238, 1);
        color: #444444;
        &::placeholder {
          color: rgba(136, 136, 136, 1);
        }
      }
    }
    .btn {
      width: 58px;
      height: 40px;
      margin-left: 7px;
      background: rgba(255, 131, 166, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
    }
  }
  .form {
    width: 100%;
    padding: 0 15px;
    margin-top: 15px;
    position: absolute;
    top: 40px;
    .section {
      position: relative;
      .title {
        height: 20px;
        font-size: 14px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 20px;
        margin-bottom: 10px;
        .icon {
          width: 4px;
          height: 10px;
          background: rgba(255, 131, 166, 1);
          border-radius: 2px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      .form-item {
        height: 30px;
        width: 100%;
        display: flex;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
        .left {
          width: 60px;
          text-align: justify;
          text-align-last: justify;
          font-size: 14px;
          line-height: 30px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgb(172, 171, 171);
        }
        .left1{
          width: auto
        }
        .right {
          flex: 1;
          line-height: 30px;
          display: flex;
          position: relative;
          .inp {
            height: 30px;
            line-height: 30px;
            flex: 1;
            background-color: transparent;
            &::placeholder {
              font-size: 14px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(136, 136, 136, 1);
            }
          }
          .moneyinp{
            color: #FC538C;
          }
          .cube-select {
            width: 100%;
            opacity: 0;
            position: absolute;
            z-index: 10;
          }
          .get-msg {
            padding: 0 14px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 16px;
            border: 1px solid rgba(255, 131, 166, 1);
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 131, 166, 1);
            position: absolute;
            bottom: 5px;
            right: 0;
            z-index: 20;
          }
        }
      }
    }
    .sub-btn {
      width: 280px;
      height: 48px;

      line-height: 48px;
      text-align: center;
      background: linear-gradient(
        180deg,
        rgba(255, 221, 221, 1) 0%,
        rgba(255, 131, 166, 1) 100%
      );
      border-radius: 24px;
      font-size: 20px;
      font-family: "PingFangSC-Medium";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin: 20px auto 100px;
    }
  }
}
</style>
